<template>
	<view>
		<view class="goods" v-for="(item,index) in data" :key="index" @click="toShow(item.id)">
			<view class="goods-left">
				<u-image width="100%" height="220rpx" :src="item.image[0].file_path" border-radius="10"></u-image>
				<!-- <image :src="item.image[0].file_path" lazy-load></image> -->
			</view>
			<view class="goods-right">
				<view class="txt-line2"><text class="tag">{{'优惠券'}}</text>{{item.subtitle_title}}</view>
				<view>品牌：{{item.business_name}}</view>
				<!-- <view>优惠时间：{{item.updated_at}}</view> -->
				<view style="margin-top: 10upx;"><image src="../../../../static/rd.svg" style="width: 30upx;height: 30upx;"></image>热度: {{item.heat}}</view>
				<view>
					<!-- <view class="coupon">
						<text>{{item[reflectKey.coupon]}}元券</text>
					</view> -->
					<view class="bottom-txt">
						<view>
							<text class="price">￥{{item.goods_price}}</text>
							<text class="del-price">￥{{item.line_price}}</text>
						</view>
						<view class="sale-num"><text>库存{{item.stock_num}}</text></view>
					</view>
				</view>
			</view>
			<!-- <ad style="width: 90%; height:100px ;" unit-id="adunit-01ab23ef48e284f3"></ad> -->
			<!-- <u-line color="red" /> -->
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			data:{},
			clickUrl:'',
			reflectKey:{
				type:Object,
				default:{
					id:'id',
					image:'image',
					price:'price',
					delPrice:'delPrice',
					coupon:'coupon',
					saleNum:'saleNum',
					platform:'platform'
				}
			}
		},
		mounted() {
			// console.log(this.clickUrl)
		},
		methods:{
			test(){
				console.log('this ia test')
			},
			//点击跳转
			toShow(id){
				uni.setStorageSync('good_id', id)
				uni.navigateTo({
					url:this.clickUrl+'?id='+id
				})
				
			}
		}
	}
</script>
<style lang="scss" scoped>
	.goods {
		// width: 99%;
		background-color: #fff;
		padding: 30rpx;
		padding-bottom: 20rpx;
		display: flex;
		font-size: 28rpx;
		border-bottom: 1px solid #DCDCDC;
		// padding: 1%;
	}
	.goods:last-child {
		border: none;
	}
	.goods-left {
		position: relative;
		flex: 0 0 35%;
		margin-right: 30rpx;
		image {
			width: 100%;
			height: 250rpx;
			border-radius: 5px;
		}
	}

	.goods-right {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.bottom{
			margin-bottom: 4px;
			font-weight: normal;
		}
		.tag{
			background-color: red;
			color: #fff;
			font-size: 20rpx;
			font-weight: normal;
			line-height: 1;
			padding: 4rpx 6rpx;
			border-radius: 4px;
			margin-right: 4px;
			position: relative;
			top: -5upx;
		}
	}
	.coupon{
		padding: 10rpx 30rpx;
		width: 25%;
		background-image: url('../../static/coupon1.png');
		background-size: 100% 100%;
		color: #fff;
		font-size: 24rpx;
		font-weight: normal;
		margin-bottom: 10rpx;
	}
	.bottom-txt{
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
		.price{
			color: red;
			font-size: 40rpx;
			font-weight: 600;
			text{
				font-size: 24rpx;
			}
		}
		.del-price{
			color: #666;
			font-weight: 600;
			font-size: 24rpx;
			text-decoration: line-through;
			margin-left: 4px;
		}
		.sale-num{
			color: #888;
			font-size: 24rpx;
			font-weight: normal;
			margin-bottom: 2px;
		}
	}
	.flex {
		display: flex;
	}

	.txt-line2{
		font-weight: bold;
		font-size: 33upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
</style>
